<template>
    <ul class="user-abr">
        <li>
            <div class="international-action-icon">简体中文</div>
        </li>
        <li>
            <div class="message-action-icon" @click="showMessages">
                <span v-if="msgsNumber > 0" class="message-num">
                    <span>{{ msgsNumber > 99 ? '99+' : msgsNumber }}</span>
                </span>
            </div>
            <div v-if="drawerDisplay" class="triangle"></div>
            <div v-if="drawerDisplay" class="drawer_box">
                <MessageList></MessageList>
            </div>
        </li>
        <li class="user-action-list">
            <div class="user-action-icon" @click="loginOut"></div>
        </li>
    </ul>
</template>

<script lang="ts" setup>
import { deleteCookie } from '@/utils/utils';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getCount } from '@/api/api.query.util';
import MessageList from '@/components/MessageList.vue';
import PubSub from 'pubsub-js';

const drawerDisplay = ref(false);
const msgsNumber = ref(0);
const router = useRouter();
initCount();
PubSub.subscribe('initCount', () => {
    initCount();
});

function initCount() {
    getCount({
        method: 'get',
        data: {},
    }).then((res) => {
        msgsNumber.value = res.result;
    });
}

function showMessages() {
    drawerDisplay.value = !drawerDisplay.value;
}
function loginOut() {
    deleteCookie('SaaS_Token');
    router.push({ name: '/login' });
}
</script>

<style lang="scss" scoped>
.user-abr {
    display: flex;
    gap: 28px;
}

.user-abr > li {
    display: flex;
    align-items: center;
}

.international-action-icon {
    padding-left: 22px;
    height: 16px;
    line-height: 16px;
    background: url('~@/assets/image/globe@2x.png') no-repeat left center / 16px;
    color: var(--font-color-dim);
    font-size: 12px;
    cursor: pointer;
}

.user-action-icon {
    width: 28px;
    height: 28px;
    background: url('~@/assets/image/user@2x.png') no-repeat center center / 28px;
    cursor: pointer;
}

.message-action-icon {
    position: relative;
    width: 28px;
    height: 28px;
    background: url('~@/assets/image/message_default@2x.png') no-repeat center center / 16px;
    cursor: pointer;
}

.message-num {
    position: absolute;
    left: 16px;
    top: 0px;
    height: 12px;
    background-color: var(--alert-color);
    border-radius: var(--border-radius);
    color: var(--font-color-reverse);
    padding: 0 4px;

    span {
        position: relative;
        top: -4px;
        font-size: 20px;
        zoom: 0.5;
    }
}
.triangle {
    z-index: 999999;
    position: relative;
}
.triangle:before {
    position: absolute;
    content: '';
    top: 11px;
    left: -26px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #ffffff transparent;
}
.drawer_box {
    position: absolute;
    z-index: 99999;
    width: 342px;
    top: 52px;
    height: 560px;
    background-color: #ffffff;
    right: 187px;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}
</style>
